<template>
  <div class="table-page">
    <Table border
           :loading="loading"
           :columns="columns1"
           :data="data1"
           @on-selection-change="multiSelect"
           :no-data-text="noData">
    </Table>
    <Page class="page-content"
          :current="currentPage"
          :total="totalPage"
          :page-size="pageSize"
          :page-size-opts="pageSizeOpts"
          show-total
          show-sizer
          show-elevator
          @on-change="changePage"
          @on-page-size-change="changPageSize">
    </Page>
  </div>
</template>

<script>
export default {
  name: 'table_page_index',
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    columns1: {
      type: Array
    },
    data1: {
      type: Array
    },
    noData: {
      type: String,
      default: '暂无数据'
    },
    currentPage: {
      type: Number,
      default: 1
    },
    totalPage: {
      type: Number
    },
    pageSize: {
      type: Number
    },
    pageSizeOpts: {
      type: Array
    }
  },
  data () {
    return {}
  },
  created () {
  },
  methods: {
    multiSelect (selection) {
      this.$emit('multi-select', selection)
    },
    changePage (page) {
      this.$emit('change-page', page)
    },
    changPageSize (pageSize) {
      this.$emit('change-page-size', pageSize)
    }
  }
}
</script>

<style lang="less" scoped>
.page-content {
  margin-top: 20px;
}
</style>
